<template>
    <li>
        <div>
            <span :class="{done: content.done}">
                {{ content.task }}
            </span>
            <span v-if="!content.done" @click="completed" >  ✅ </span>
        </div>

    </li>
</template>

<script>
export default {
  props: ['index', 'content'],
  data: function () {
    return {

    }
  },
  methods: {
    completed () {
      this.$axios.patch('http://localhost:3000/todos?id=eq.' + this.content.id,
        { done: true },
        {
          headers: { 'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoidG9kb191c2VyIn0.HChY9Ln9fSbStydM-XhOwiY1VzUxNgkILgimjEKf6iI' }
        }
      ).then((response) => {
        console.log(response)
        if (response.status === 204) {
          this.$emit('completed')
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped>
.done {
    text-decoration: line-through;
    color: rgb(112, 112, 112);
}
li {
    list-style: none;
}
</style>
